<template>
    <div class="card tlcmd-div card-padding">
      <el-row>
        <el-col :span="12">
          <div class="custom-scrollbar" :style="{ maxHeight: autoHeight }">
          <el-tree
            ref="tlcTreeRef"
            class="tel-tree"
            :data="treeData"
            show-checkbox
            :default-expand-all="true"
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            @check="handelChange">
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
              </template>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="12">
          <div v-show="dialogVisible">
            <CmdsPanel class="cmd-div card" @close="dialogVisible = false"></CmdsPanel>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card card-padding">
      <tc-logs></tc-logs>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { fetchTcList } from '@/api/loads-api.js'
import { useTcStore } from '@/stores/tc-module.js'
import CmdsPanel from './CmdsPanel.vue'
import TcLogs from './TcLogs.vue'
import { useAutoHeightMixin } from "@/mixins/AutoHeightMixin.js"

const tcStore = useTcStore()
const emit = defineEmits(['check'])
const tlcTreeRef = ref(null)
let dialogVisible = ref(false)
let treeData = ref([{
  id: 0,
  label: '遥控指令',
  children: []
}])
const { autoHeight,updateHeight } = useAutoHeightMixin()


fetchTcList({}, (response) => {
  const resData = response.data.data.cmds

  for(const item of resData){
      let child = {
        id: item.id,
        label: ` ${item.cmdName}`
      }
      treeData.value[0].children.push(child)
      tcStore.assingCmd(item)
    }
  console.log("获取遥控命令列表成功:", resData)
}, (err)=> {
  console.log("获取遥控命令列表失败:", err)
})

const handelChange = () => {
  const nodes = tlcTreeRef.value.getCheckedKeys()
  if(nodes[0] === 0) {
    nodes.splice(0, 1)
  }
  tcStore.setSelectNode(nodes)
  if(nodes.length > 0) {
    dialogVisible.value = true
  } else {
    dialogVisible.value = false
  }
}

const closePanel = () => {
  dialogVisible.value = false
  tlcTreeRef.value.setCheckedKeys([], false)
  tcStore.setSelectNode([])
}
</script>

<style lang="scss" scoped>
.tlcmd-div .cmd-div {
  //margin-left: 20px;
}
</style>